<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->

<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户名" v-model="listQuery.username"></el-input>
      <el-button class="filter-item" style="margin-left: 20px;margin-right: 20px;" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-radio-group @change="handleChangeType" style="vertical-align: top;margin-top: 2px;" v-model="type" size="medium">
        <el-radio label="1" border>个人</el-radio>
        <el-radio label="2" border>公司</el-radio>
      </el-radio-group>
    </div>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 99%">

      <el-table-column align="center" label="端口">
        <template slot-scope="scope">
          <span>{{scope.row.dateSource ? '商城' : '供应链'}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="type === '1' ? '个人名称' : '公司名称'">
        <template slot-scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="入驻类型">
        <template slot-scope="scope">
          <el-tag>{{scope.row.enterType | settleTypeFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="邮箱">
        <template slot-scope="scope">
          <span>{{scope.row.emall}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="联系方式">
        <template slot-scope="scope">
          <span>{{scope.row.telephone}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="入驻时间">
        <template slot-scope="scope">
          <span>{{scope.row.enterTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="状态">
        <template slot-scope="scope">
          <el-tag>{{scope.row.examineStatus | statusFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="small" type="success" @click="handleCheckDetail(scope.row)">查看</el-button>
          <el-button size="small" type="danger" @click="deletes(scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>


    <!--企业入驻审核-->
    <el-dialog title="企业入驻审核" :visible.sync="companyDialog">
      <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="入驻类型">
          <span class="line-word">{{form.enterType | settleTypeFilter}}</span>
        </el-form-item>

        <el-form-item label="企业名称">
          <span class="line-word">{{form.companyName}}</span>
        </el-form-item>

        <el-form-item label="企业类型">
          <span class="line-word">{{form.type | settleTypeFilter}}</span>
        </el-form-item>

        <el-form-item label="企业人数">
          <span class="line-word">{{form.peopleNumber}}</span>
        </el-form-item>

        <el-form-item label="联系电话">
          <span class="line-word">{{form.telephone}}</span>
        </el-form-item>

        <el-form-item label="联系地址">
          <span class="line-word">{{form.address}}</span>
        </el-form-item>

        <el-form-item label="产品类型">
          <span class="line-word">{{form.productType}}</span>
        </el-form-item>

        <el-form-item label="企业介绍">
          <span class="line-word">{{form.companyBrief}}</span>
        </el-form-item>

        <el-form-item label="营业执照">
          <span class="line-word">{{form.businessLicenseType === '1' ? '有执照' : '无执照'}}</span>
        </el-form-item>

        <el-form-item label="执照名称" v-if="form.businessLicenseType === '1'">
          <span class="line-word">{{form.businessLicenseName}}</span>
        </el-form-item>

        <el-form-item label="执照附件" v-if="form.businessLicenseType === '1'">
          <img class="image" :src="form.businessLicenseAtta">
        </el-form-item>

        <el-form-item label="企业法人">
          <span class="line-word">{{form.corporationName}}</span>
        </el-form-item>

        <el-form-item label="注册号">
          <span class="line-word">{{form.creditedCode}}</span>
        </el-form-item>

        <el-form-item label="经办类型">
          <span class="line-word">{{form.handleType === '1' ? '法人' : '经办人'}}</span>
        </el-form-item>

        <el-form-item label="法人身份证">
          <span class="line-word">{{form.corporationIdNum}}</span>
        </el-form-item>

        <el-form-item label="身份证照片">
          <img class="image" v-for="(item, index) in corporationIdPic" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="企业实景照">
          <img class="image" v-for="(item, index) in doorPic" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="生产车间照">
          <img class="image" v-for="(item, index) in workshopPic" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="打版照">
          <img class="image" v-for="(item, index) in patternRoomPic" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="展厅照">
          <img class="image" v-for="(item, index) in displayPic" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="质量体系照">
          <img class="image" v-for="(item, index) in isoPic" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="授权文件">
          <img class="image" :src="form.authorizeAtta">
        </el-form-item>

        <el-form-item label="审核结果">
          <el-radio-group style="vertical-align: top;margin-top: 2px;" v-model="result" size="medium">
            <el-radio label="1" border>通过</el-radio>
            <el-radio label="2" border>不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审核意见">
          <el-input v-model="form.username" type="textarea" resize="none" placeholder="请输用户名"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>

    <!--个人入驻审核-->
    <el-dialog title="个人入驻审核" :visible.sync="personalDialog">
      <el-form :model="form" ref="form" label-width="120px">
        <el-form-item label="入驻类型">
          <span class="line-word">{{form.type | settleTypeFilter}}</span>
        </el-form-item>

        <el-form-item label="身份类型" v-if="form.designerType">
          <span class="line-word">{{form.designerType | designerFilter}}</span>
        </el-form-item>

        <el-form-item label="姓名">
          <span class="line-word">{{form.name}}</span>
        </el-form-item>

        <el-form-item label="工作年限">
          <span class="line-word">{{form.workYear}}</span>
        </el-form-item>

        <el-form-item label="联系地址">
          <span class="line-word">{{form.address}}</span>
        </el-form-item>

        <el-form-item label="联系电话">
          <span class="line-word">{{form.phone}}</span>
        </el-form-item>

        <el-form-item label="身份证号码">
          <span class="line-word">{{form.idCard}}</span>
        </el-form-item>

        <el-form-item label="身份证照片">
          <img class="image" v-for="(item, index) in attachmentIdCardUrl" :src="item" :key="index">
        </el-form-item>

        <el-form-item label="个人介绍及成就">
          <span class="line-word">{{form.introductionAchievements}}</span>
        </el-form-item>

        <el-form-item label="个人经历">
          <el-table :data="form.yykPersonalWorkExperiences" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 99%">

            <el-table-column align="center" label="时间" width="200">
              <template slot-scope="scope">
                <span>{{scope.row.startTime | parseTime('{y}-{m}-{d}')}}&nbsp至&nbsp{{scope.row.endTime | parseTime('{y}-{m}-{d}')}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="公司名称">
              <template slot-scope="scope">
                <span>{{scope.row.companyName}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="职位">
              <template slot-scope="scope">
                <span>{{scope.row.positionName}}</span>
              </template>
            </el-table-column>

            <el-table-column align="center" label="工作内容">
              <template slot-scope="scope">
                <span>{{scope.row.workContent}}</span>
              </template>
            </el-table-column>

          </el-table>
        </el-form-item>

        <el-form-item label="审核结果">
          <el-radio-group style="vertical-align: top;margin-top: 2px;" v-model="result" size="medium" :disabled="form.status !== '0'">
            <el-radio label="1" border>通过</el-radio>
            <el-radio label="2" border>不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审核意见">
          <el-input v-model="form.username" type="textarea" resize="none" placeholder="请输用户名" :disabled="form.status !== '0'"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button type="primary" @click="update('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getSettleList, getSettleDetail, settleApproval } from '@/api/seller'
  import waves from '@/directive/waves/index.js' // 水波纹指令
  import { mapGetters } from 'vuex'

  export default {
    name: 'task',
    directives: {
      waves
    },
    data() {
      return {
        type: '1', // 类型
        result: '1', // 审核结果
        list: null, // 列表数据
        total: null, // 总条数
        listLoading: true, // loading
        listQuery: { // 请求参数
          pageNo: 1,
          pageSize: 10
        },
        form: {},
        attachmentIdCardUrl: [], // 个人身份证照片
        corporationIdPic: [], // 身份证照片
        doorPic: [], // 企业实景照片
        workshopPic: [], // 企业实景照片
        patternRoomPic: [], // 企业实景照片
        displayPic: [], // 企业实景照片
        isoPic: [], // 企业实景照片
        companyDialog: false, // 公司入驻详情
        personalDialog: false, // 个人入驻详情
        tableKey: 0
      }
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    filters: {
      designerFilter(type) {
        const statusMap = {
          1: '专职设计师',
          2: '独立设计师',
          3: '联盟设计师'
        }
        return statusMap[type]
      },
      statusFilter(status) {
        const statusMap = {
          0: '待审批',
          1: '审批通过',
          2: '审批不通过'
        }
        return statusMap[status]
      },
      settleTypeFilter(type) {
        const typeMap = {
          1: '泳装厂',
          2: '面料厂',
          3: '辅料厂',
          4: '设计师',
          5: '打版师',
          6: '样衣工',
          7: '裁床工',
          8: '临时工',
        }
        return typeMap[type]
      }
    },
    created() {
      this.getList()
      // this.sys_user_add = this.permissions['sys_user_add']
      // this.sys_user_upd = this.permissions['sys_user_upd']
      // this.sys_user_del = this.permissions['sys_user_del']
    },
    methods: {
      filterJavaTime(str) {
        const times = new Date(str).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
        // const times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
        return times.substring(0, 11)
      },
      getList() {
        // const that = this
        this.listLoading = true;
        // this.listQuery.isAsc = false;
        this.listQuery.personalOrCompany = this.type
        getSettleList(this.listQuery).then(response => {
          this.list = response.data.data.records
          this.total = response.data.data.total
          this.listLoading = false
        });
      },
      handleChangeType() { // 切换类型
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleFilter() { // 搜索
        this.listQuery.pageNo = 1
        this.getList()
      },
      handleSizeChange(val) { // 页面大小切换
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) { // 页码切换
        this.listQuery.pageNo = val
        this.getList()
      },
      handleCheckDetail(row) { // 查看详情
        let url = this.type === '1' ? '/app/per/' : '/app/enterCompany/'
        url = url + row.id
        getSettleDetail(url, {}).then(response => {
          this.form = response.data.data
          this.attachmentIdCardUrl = this.form.attachmentIdCardUrl ? this.form.attachmentIdCardUrl.split(',') : [] // 个人身份证照片
          this.corporationIdPic = this.form.corporationIdPic ? this.form.corporationIdPic.split(',') : [] // 企业身份证照片
          this.doorPic = this.form.doorPic ? this.form.doorPic.split(',') : [] // 企业实景照片
          this.workshopPic = this.form.workshopPic ? this.form.workshopPic.split(',') : [] // 企业生产车间照片
          this.patternRoomPic = this.form.patternRoomPic ? this.form.patternRoomPic.split(',') : [] // 企业打版室照片
          this.displayPic = this.form.displayPic ? this.form.displayPic.split(',') : [] // 企业展示厅照片
          this.isoPic = this.form.isoPic ? this.form.isoPic.split(',') : [] // 企业质量体系证书照片
          if (this.form.status === '2') {
            this.result = '2'
          } else {
            this.result = '1'
          }
          if (this.type === '1') {
            this.personalDialog = true
          } else {
            this.companyDialog = true
          }
        })
      },
      cancel(formName) { // 取消
        this.companyDialog = false
        this.personalDialog = false
        this.$refs[formName].resetFields()
      },
      update() {
        if (this.form.approval !== '0') {
          this.cancel('form')
          return
        }
        const param = {
          id: this.form.id,
          status: this.result,
          personalOrCompany: this.type
        }
        settleApproval(param).then(response => {
          if (response.data.code === '0') {
            this.cancel('form')
            this.getList()
          }
        })
      },
      deletes(row) {
        this.$confirm(
          '此操作将永久删除, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          console.log(2111)
        })
      }
    }
  }
</script>

<style scoped>
  .line-word {
    padding: 0 15px;
  }
  .image {
    display: inline-block;
    width: 150px;
    margin-right: 30px;
  }
</style>
